<template>
  <div class="account-information information-container">
    <!-- modal -->
    <a-modal
      wrap-class-name="modal-wrap-container"
      :title="passwordModel.title"
      :visible="passwordModel.visible"
      v-bind="modalProps"
      :confirm-loading="passwordModel.confirmLoading"
      width="32%"
      @ok="modalSubmit(passwordModel)"
      @cancel="modalCancel(passwordModel)"
    >
      <ChangePassword :ref="passwordModel.ref" />
    </a-modal>

    <a-modal
      wrap-class-name="modal-wrap-container"
      :title="authMailModel.title"
      :visible="authMailModel.visible"
      v-bind="modalProps"
      width="32%"
      :confirm-loading="authMailModel.confirmLoading"
      @ok="modalSubmit(authMailModel)"
      @cancel="modalCancel(authMailModel)"
    >
      <AuthEmail :ref="authMailModel.ref" />
    </a-modal>

    <a-modal
      wrap-class-name="modal-wrap-container"
      :title="bindMailModel.title"
      :visible="bindMailModel.visible"
      v-bind="modalProps"
      width="32%"
      :confirm-loading="bindMailModel.confirmLoading"
      @ok="modalSubmit(bindMailModel)"
      @cancel="modalCancel(bindMailModel)"
    >
      <BindEmail :ref="bindMailModel.ref" />
    </a-modal>

    <a-modal
      wrap-class-name="modal-wrap-container"
      :title="bindMobileModel.title"
      :visible="bindMobileModel.visible"
      v-bind="modalProps"
      width="32%"
      :confirm-loading="bindMobileModel.confirmLoading"
      @ok="modalSubmit(bindMobileModel)"
      @cancel="modalCancel(bindMobileModel)"
    >
      <BindPhone :ref="bindMobileModel.ref" />
    </a-modal>

    <div class="title">
      *Account Information
    </div>
    <div class="infos-container">
      <div class="info-container">
        <div class="label">
          Electronic Mail: <span>{{ currentUser.email }}</span>
          <!-- <span v-if="currentUser.user_email_status" class="approved-text">Approved</span> -->
        </div>
        <div
          class="button"
        >
          <!-- <a-button
            v-if="!currentUser.user_email_status"
            size="small"
            shape="round"
            class="ant-btn-default"
            @click="authMailModel.visible = true"
          >
            Go to certification
          </a-button> -->
          <!-- <a-button
            v-if="!currentUser.user_email_status"
            size="small"
            shape="round"
            class="ant-btn-default"
            @click="authMailModel.visible = true"
          >
            Go to certification
          </a-button> -->
          <!-- <a-button
            v-else
            size="small"
            shape="round"
            class="ant-btn-default"
            @click="bindMailModel.visible = true"
          >
            Rebind
          </a-button> -->
        </div>
      </div>
      <div class="info-container">
        <div class="label">
          <!-- .replace(/^(.{3})(.*)(.{4})$/, '$1 $2 $3') -->
          Phone Number: <span>{{ currentUser.mobile | mobile }}</span>
        </div>
        <div
          class="button"
        >
          <a-button
            v-if="!currentUser.mobile"
            size="small"
            shape="round"
            class="ant-btn-default"
            @click="bindMobileModel.visible = true"
          >
            Bind mobile Phone Number
            <!-- {{ currentUser.mobile ? 'Rebind' : 'Bind mobile Phone Number' }} -->
          </a-button>
        </div>
      </div>
      <div class="info-container">
        <div class="label">
          Password: <span
            v-for="index in 6"
            :key="index"
            class="password"
          />
        </div>
        <div class="button">
          <a-button
            size="small"
            shape="round"
            class="ant-btn-default"
            @click="passwordModel.visible = true"
          >
            change Password
          </a-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import modal from '../../modal/modal';
import {
 BindEmail, BindPhone, ChangePassword, AuthEmail
} from '../../modal';
import { mapGetters } from 'vuex';

export default {
  components: {
    BindEmail,
    BindPhone,
    ChangePassword,
    AuthEmail
  },

  filters: {
    mobile(value) {
      if (!value) return 'None';

      return (value.toString()).replace(/^(.{4})(.*)(.{3})$/, '$1 $2 $3');
    }
  },

  mixins: [modal],

  computed: {
    ...mapGetters(['currentUser'])
  }
};

</script>

<style lang="scss" scoped>
 ::v-deep .modal-wrap-container {
   .ant-modal-header {
     border-top-left-radius: $border-radius-md;
     border-top-right-radius: $border-radius-md;
   }
    .ant-modal-content{
      border-radius: $border-radius-md;
    }
  }
.account-information {

  padding: 32px 70px 20px 90px;
  .infos-container {
    padding-left: 164px!important;
    .approved-text {
      display: inline-block;
      padding: 0 12px;
      background-color: rgba($color: $theme-color, $alpha: 0.2);
      box-sizing: border-box;
      border: 1px solid $theme-color;
      border-radius: 25px;
    }
  }
}
</style>
